<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="600px"
      @closed="resetForm('form')"
    >
      <div>
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="规则类型" prop="name">
            <el-select v-model="form.ruleType" placeholder="请选择条件">
              <el-option
                v-for="v in ruleList"
                :key="v.value"
                :label="v.msg"
                :value="v.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="规则名称" prop="name">
            <el-input v-model.trim="form.name"></el-input>
          </el-form-item>
          <el-form-item
            v-if="$store.getters.userId < 0"
            label="规则编码"
            prop="code"
          >
            <el-input v-model.trim="form.code"></el-input>
          </el-form-item>
          <el-form-item label="条件" prop="condition">
            <el-select v-model="form.condition" placeholder="请选择条件">
              <el-option label="条件一" value="1"></el-option>
              <el-option label="条件二" value="2"></el-option>
              <el-option label="条件三" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="规则值" prop="value">
            <el-input-number
              v-model="form.value"
              :min="1"
              :max="1000"
              size="medium"
              label="规则值"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="最大值" prop="maxValue">
            <el-input-number
              v-model="form.maxValue"
              :min="1"
              :max="1000"
              size="medium"
              label="最大值"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="排序">
            <el-input-number
              v-model="form.orderBy"
              :min="1"
              :max="1000"
              size="medium"
              label="最大值"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="状态">
            <el-switch
              v-model="form.status"
              active-value="0"
              inactive-value="1"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="备注" prop="des">
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.des"
            >
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="custom" v-preventReClick @click="submitForm('form')"
          >提 交</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  sysScoreRuleAdd,
  sysScoreRuleUpdate,
} from "@/api/admin/system/sysScoreRule.js";
export default {
  data() {
    return {
      title: "新增",
      dialogVisible: false,
      form: {
        ruleType: "", //规则类型，1-日常积分，2-学积分，3-活动积分，4-管理积分，5…
        name: "", //规则名称
        code: "", //规则编码
        condition: "", //条件
        value: 1, //规则值
        maxValue: 10, //最大值
        des: "", //备注
        extFiled1: "", //扩展字段
        status: 0, //是否开启：0-开启(默认)，1-关闭
        orderBy: 10,
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
    };
  },
  props: ["ruleList"],
  mounted() {
    this.$bus.$on("showDialogScoreRuleAdd", this.init);
  },
  beforeDestroy() {
    this.$bus.$off("showDialogScoreRuleAdd");
  },
  methods: {
    //显示弹窗
    init(row) {
      if (row) {
        this.form = { ...this.form, ...row };
        this.$set(this.form, "id", row.id);
      } else {
        this.form = this.$options.data().form;
        this.$delete(this.form, "id");
      }
      this.title = row ? "编辑" : "新增";
      this.dialogVisible = true;
    },
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.title == "新增" ? this.add() : this.edit();
        }
      });
    },
    //新增
    add() {
      sysScoreRuleAdd(this.form).then((res) => {
        this.done();
      });
    },
    //编辑
    edit() {
      sysScoreRuleUpdate(this.form).then((res) => {
        this.done();
      });
    },
    done() {
      this.dialogVisible = false;
      this.$bus.$emit("refreshScoreRuleList");
      this.$message({
        message: "操作成功",
        type: "success",
      });
    },
    //重置表单
    resetForm(form) {
      this.$refs[form].resetFields();
    },
  },
};
</script>